<template>
  <div class='container'>
    <el-dialog :title="showTitle" :visible="showDialog" width="30%" @close="btnCancel">
      <el-form :model="editForm" label-width="80px" :rules="rule" style="margin-left:40px;" ref="editForm">
        <el-form-item label="所属学科" prop="subjectName">
          <el-select placeholder="请选择" v-model="editForm.subjectName" style="width:80%">
            <el-option v-for="item in list" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input placeholder="请输入标签名称" v-model="editForm.tagName" style="widht:80%;"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { add, update } from '@/api/hmmm/tags'
export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true
    },
    formData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: {},
      userId: '',
      editForm: {
        subjectName: '',
        tagName: ''
      },
      rule: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在3-8个字符', trigger: 'blur' }
        ],
        subjectName: [
          { type: 'number', required: true, message: '请选择所属学科', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showTitle () {
      return this.formData.id ? '修改标签' : '新增标签'
    }
  },
  methods: {
    // 点击修改时调用该函数
    async editList () {
      const { data: res } = await simple()
      this.list = res
      this.editForm.subjectName = this.formData.subjectID
      this.editForm.tagName = this.formData.tagName
      this.userId = this.formData.id
    },
    // 点击新增时调用该函数
    async addList () {
      const { data: res } = await simple()
      this.list = res
    },
    async btnOK () {
      try {
        await this.$refs.editForm.validate()
        if (this.formData.id) {
          await update({
            id: this.userId,
            subjectID: this.editForm.subjectName,
            tagName: this.editForm.tagName
          })
          this.$emit('update:showDialog', false)
          this.$parent.getList(this.$parent.page)
          this.$message.success('修改标签成功')
        } else {
          await add({
            id: this.userId,
            subjectID: this.editForm.subjectName,
            tagName: this.editForm.tagName
          })
          this.$emit('update:showDialog', false)
          this.$parent.getList(this.$parent.page)
          this.$message.success('新增标签成功')
        }
      } catch (err) {
        console.log(err)
      }
    },
    btnCancel () {
      this.editForm.subjectName = ''
      this.editForm.tagName = ''
      this.$refs.editForm.resetFields()
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang='less'></style>
